<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <!--vue的组件开发，全局组件和局部组件
        作用：1.组件减少vue根实例的代码量
             2.一个组件负责完成一个项目中的一个功能。实现业务的隔离
             3.组件可以在vue中实现复用
        vue推荐开发方式：一个应用中只能存在一个vue实例
    -->

    <!--使用全局组件-->
    <login></login>

    <!--使用局部组件-->
    <add></add>

</div>

<!--测试在外面使用vue的组件   得出结论：只能在vue作用范围内才可以使用全局组件和局部组件-->

<login></login>


<add></add>

</body>
</html>

<script src="resource/vue.js"></script>
<script src="resource/axios.min.js"></script>

<script>


    //定义一个全局组件，参数1：组件名字，参数2：组件的配置对象
    Vue.component('login',{
        template:'<div><h2>登录界面</h2></div>'//推荐使用div包裹。因为需要有一个根节点
    });



    new Vue({
        el:app,
        data: {
            msg:"vue 组件使用"
        },
        methods:{
        },
        components:{//在这里注册局部组件
            add:{//这是局部组件的名字
                template: '<div><h1>添加页面</h1></div>'//局部组件，只能在此作用域有效
            }

        }


        });


    //发送axios的get请求
    axios.get("url").then(function (response) {
        console.log(response);
    })

    //axios发送各种方式的异步请求
    axios.get("url").then().catch();
    axios.post("url",{firstname:"1",sencondname:"2"}).then(function (res) {}).catch();


    //创建axios的配置对象，可以少写代码
    var instance = axios.create({
        baseURL:"http://localhost:8080/"
    });
    //通过创建的实例来发送请求
    instance.get("/demo?id=1").then(function (res) {}).catch();//


    //请求拦截器，写token那些
    instance.interceptors.request.use(function (config) {
        //此处的config是包含了所有的请求信息，我们在修改了所有的请求信息后，在返回回去
        return config;
    });

    //响应拦截器
    instance.interceptors.response.use(function (response) {
        return response;
    });

</script>